<template>
    <div class="view-wrapper">
      <div class="head">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input v-model="formInline.name" placeholder="请输入预警模型名称"></el-input>
          </el-form-item>
          <el-form-item label="预警分类：">
            <el-select placeholder="请选择" v-model="formInline.type">
                <el-option v-for="item in options" :key="item.id" :label="item.value" :value="item.id">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
          @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
          <template v-slot:type="{ scope }">
            <dict-tag :options="options" :value="scope.row.type" />
          </template>
          <template v-slot:sideIdList="{ scope }">
            <span v-for="(item,index) in scope.row.sideIdList" :key="index">{{ item=='1'?'监管端':'保险端' }}<span v-if="index+1!=scope.row.sideIdList.length">、</span></span>
          </template>
          <template v-slot:operate="{ scope }">
            <el-button type="text" size="" @click="editJump(scope.row.id)">编辑</el-button>
          </template>
        </ex-table>
      </div>
      <!-- 编辑弹窗 -->
      <detail-dialog v-if="detailDialog" :id="editId" :visible.sync="detailDialog" @success="_handleSuccess" />
    </div>
  </template>
  <script>
    // components
    import {
      waringConfigLs,
    } from "@/api/setting/warningModel";
    import ExportExcelButton from "@/components/ExportExcelButton/index";
    import handlePageMixin from "@/mixins/handlePageMixin";
    import DetailDialog from "./components/DetailDialog";
    import {
      mapGetters
    } from "vuex";
    export default {
      name: "billList",
      components: {
        ExportExcelButton,
        DetailDialog
      },
      mixins: [handlePageMixin],
      data() {
        return {
          loading: false,
          options:[],
          formInline: {
            name: "", //预警模型名称
            type:'',//预警分类 gov_warning_type
          },
          detailDialog: false,
          ruleForm: {
            name: "", //区域名称
            sort: "", //推荐序号
          },
          tableData: [],
          tableColumn: [{
              prop: "name",
              label: "预警模型名称",
            },
            {
              label: "预警分类",
              slot: true,
              slotName: "type",
            },
            {
              label: "预警端",
              slot: true,
              slotName: "sideIdList",
            },
            {
              prop: "updateTime",
              label: "修改日期",
            },
            {
              label: "操作",
              slot: true,
              slotName: "operate",
              fixed: "right",
            },
          ],
          shopId: '',
          editId: '', //编辑id
        };
      },
      computed: {
        ...mapGetters(["isChain"]),
      },
      created() {},
      mounted() {
        this.getDict();
        this.getList();
      },
      methods: {
        getDict() {
          var dictType = "gov_warning_type";
          this.$getSelectList(dictType)
          .then((res) => {
            var arr = [{
              id: "",
              value: "全部",
            }, ];
            this.options = arr.concat(res.result[0].dictList);
          })
          .catch(() => {});
        },
        editJump(id) {
          //编辑
          this.title = '编辑区域'
          this.editId = id
          this.detailDialog = true
        },
        _handleSuccess(e) {
          //成功回调
          this.reset()
        },
        search() {
          //搜索
          this.pageOptions.pageNum = 1;
          this.$refs.table.pageOptions.pageNum = 1;
          this.getList();
        },
        reset() {
          this.formInline = {};
          this.pageOptions.pageNum = 1;
          this.$refs.table.pageOptions.pageNum = 1;
          this.getList();
        },
        getList() {
          const params = {
            ...this.pageOptions,
            ...this.formInline,
          };
          this.loading = true;
          waringConfigLs(params)
            .then((res) => {
              const {
                total,
                records
              } = res.result;
              this.tableData = records;
              this.$refs.table.pageOptions.total = total;
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        },
      },
    };
  
  </script>
  <style lang="scss" scoped>
    .el-card-title {
      font-size: 20px;
    }
  
    .head {
      //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px 0;
    }
  
    .el-form--inline .el-form-item {
      margin-right: 40px;
    }
  
    .listBox {
      //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
      background-color: #fff;
      border-radius: 8px;
      //   height: 120px;
      padding: 20px 20px;
      margin-top: 10px;
    }
  
    .table_list {
      display: flex;
      align-items: center;
      // border: 1px solid #DCDFE6;
      border-radius: 7px;
      width: 220px;
      margin-bottom: 10px;
    }
  
    .tableBox {
      width: calc(100% / 3);
      height: 36px;
      text-align: center;
      line-height: 36px;
      color: #303133;
      font-size: 14px;
      border: 1px solid #dcdfe6;
      border-right: 0;
    }
  
    .tableBox:first-child {
      border-radius: 7px 0px 0px 7px;
    }
  
    .tableBox:last-child {
      border-right: 1px solid #dcdfe6;
      border-radius: 0px 7px 7px 0px;
    }
  
    .spchoosetext {
      background-color: #fff4e6;
      color: #ff9300;
      // border: 1px solid #ff9300;
    }
  
    .listBox_head {
      margin-bottom: 20px;
      display: flex;
    }
    .area_box{
      cursor: pointer;
    }
    .area_box:hover{
      color: #1890FF;
    }
  </style>
  